<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="1200px" ok-text="确认" cancel-text="取消"
    @ok="addFormSubmit" class="parOrder_modal">
    <a-alert v-if="insureOrderId" message="是否复制该订单中的明细人员再次创建订单？将会生成一条待提交订单" type="warning" style="margin-bottom: 10px;"/>
    <a-alert v-else message="生成次月账单会默认根据上月参保人账单和增减员计划，智能计算" style="margin-bottom: 10px;"></a-alert>
    <a-form layout="inline" :form="events_form" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="企业" v-if="userInfo.type == 4">
        <a-select v-model="enterpriseId" @change="enterpriseChange" placeholder="选择企业" style="width: 336px;">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="人员选择">
        <a-tree-select v-decorator="['insureNoList', { rules: [{ required: true, message: '请选择参保人员' }] }]" :tree-data="treeData" tree-checkable placeholder="请选择参保人员" :replaceFields="{ value: 'orgId', title: 'orgName', children: 'children' }"/>
      </a-form-item> -->
      <a-form-item label="全部在缴人员选择" v-if="!insureOrderId">
        <a-select placeholder="请选择是否在缴" v-decorator="['defaultInsureStaff', { rules: [{ required: true, message: '请选择是否在缴' }] }]">
          <a-select-option :key="1">是</a-select-option>
          <a-select-option :key="0">否</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="订单名称">
        <a-input placeholder="请输入订单名称"
          v-decorator="['orderName', { rules: [{ required: true, message: '请输入订单名称' }] }]"></a-input>
      </a-form-item>
      <a-form-item label="订单服务商">
        <a-select placeholder="请选择订单服务商" v-decorator="['parkId', { rules: [{ required: true, message: '请选择订单服务商' }] }]">
          <a-select-option v-for="item in parkList" :key="item.parkId">{{ item.parkName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="合作类型">
        <a-select @change="bizTypeChange" placeholder="请选择合作类型" v-decorator="['bizId', { rules: [{ required: true, message: '请选择合作类型' }] }]">
          <a-select-option v-for="item in bizTypeList" :key="item.bizId" :bizTypeName="item.bizTypeName">{{ item.bizTypeName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="订单类型">
        <a-select placeholder="请选择订单类型" v-decorator="['orderPayType', { rules: [{ required: true, message: '订单类型' }] }]">
          <a-select-option value="1">社保</a-select-option>
          <a-select-option value="2">公积金</a-select-option>
          <a-select-option value="3">社保&公积金</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="参保月份">
        <a-month-picker valueFormat="YYYY-MM" placeholder="请选择参保月份"
          v-decorator="['insureMonth', { rules: [{ required: true, message: '请选择参保月份' }] }]"></a-month-picker>
      </a-form-item>
      <a-form-item label="订单类别">
        <a-select placeholder="请选择订单类别" v-decorator="['orderType', { rules: [{ required: true, message: '请选择订单类别' }] }]">
          <a-select-option value="1">正常订单</a-select-option>
          <a-select-option value="2">补缴订单</a-select-option>
          <a-select-option value="3">列账订单</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {
  parkRelation,
  listEnterpriseBizType,
  createInsureOrder,
  copyInsureOrder
} from "@/api/human/ensurePayOrder"
import {
  selectEnterpriseOrgTreeStaff
} from "@/api/human/ensureJoinStaff"
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      insureNo: "",
      insureNoList: [],
      info: {},
      caseId: undefined,
      planData: [],
      insureOrderId: undefined, // 社保订单号

      enterpriseId: "", // 企业id
      enterpriseData: [], // 企业列表
      parkList: [], // 服务商列表
      bizTypeList: [], // 业务类型列表
      bizTypeName: "",

      treeData: [], // 参保人员列表
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(enterpriseId,insureOrderId) {
      this.visible = true;
      this.insureOrderId = undefined;
      if (this.userInfo.type == 4) {
        // hr管理端
        this.getEnterpriseData(enterpriseId);
      } else if (this.userInfo.type == 5) {
        // hr企业端
        this.enterpriseId = enterpriseId;
        this.getParkRelation();
        this.getListEnterpriseBizType();
        // this.getTreeData();
      }
      if (insureOrderId) {
        this.insureOrderId = insureOrderId;
        this.title = '复制社保订单生成';
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
      } else {
        this.title = '社保订单生成';
        this.$nextTick(() => {
          this.events_form.resetFields();
        })
      }
    },
    // 获取服务商列表
    async getParkRelation() {
      this.events_form.resetFields("parkId");
      const { code, data } = await parkRelation(this.enterpriseId);
      if (code == "1") {
        this.parkList = data;
      }
    },
    // 获取业务类型列表
    async getListEnterpriseBizType() {
      this.events_form.resetFields("bizType");
      const { code, data } = await listEnterpriseBizType(this.enterpriseId);
      if (code == "1") {
        this.bizTypeList = data;
      }
    },
    // 获取人员列表
    async getTreeData() {
      let params = {
        parentOrgId: this.enterpriseId,
        enterpriseId: this.enterpriseId,
        staffType: 2
      }
      const { code, data } = await selectEnterpriseOrgTreeStaff(params);
      if (code === '1') {
        this.treeData = data;
      }
    },
    // 类型选择
    bizTypeChange(value, option) {
      this.bizTypeName = option.data.attrs.bizTypeName
    },
    // 获取客户员工
    async getEnterpriseData(id) {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
      if (id) {
        this.enterpriseId = id;
      } else {
        this.enterpriseId = this.enterpriseData[0].enterpriseId;
      }
      this.getParkRelation();
      this.getListEnterpriseBizType();
      // this.getTreeData();
    },
    // 选择客户
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.getParkRelation();
      this.getListEnterpriseBizType();
      // this.getTreeData();
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.enterpriseId) {
            values.enterpriseId = this.enterpriseId;
          }
          if (this.insureOrderId) {
            values.insureOrderId = this.insureOrderId;
          }
          this.submitLoading = true;
          const { code } = this.insureOrderId ? await copyInsureOrder(values) : await createInsureOrder(values);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$message.success('操作成功');
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.parOrder_modal {
  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
